import React from "react"
import { observer, inject } from "mobx-react"
import queryString from "query-string"
@inject("PlaylistStore")
@observer
class ListDtails extends React.Component {
    constructor() {
        super()
        this.state = {
            id: ""
        }
    }
    back(props) {
        this.props.history.go(-1)
    }
    forword(props) {
        // this.props.history.push(`/Discover/player?id=${id}`)
        // let id=this.props.PlaylistStore.details_store
        this.props.history.push(`/Discover/player`)
        // console.log(this.props.history)
    }
    componentDidMount() {
        let { search } = this.props.history.location
        let id = queryString.parse(search)
        // console.log(id)
        this.props.PlaylistStore.get_details(id.id)
        // this.props.PlaylistStore.get_lists(id.id)
        // console.log(id.id)
        // this.props.PlaylistStore.get_details()

    }
    render() {
        // console.log(this.props.PlaylistStore.details_store, '======')
        let arr = this.props.PlaylistStore.details_store
        // let arr1 = this.props.PlaylistStore.lists_store
        return (
            <fieldset className="ListDetails_backurl">
                <div className="ListDetails">
                    <button className="ListDetail_btn" onClick={this.back.bind(this)}><svg t="1574037423591" className="playlist_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="861" width="32" height="32"><path d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.701-14.563-15.701-38.229 0-52.792L738.418 13.198c15.701-14.563 41.187-14.563 56.889 0 15.701 14.564 15.701 38.23 0 52.793L314.027 512l481.28 446.009c15.701 14.563 15.701 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z" p-id="862"></path></svg></button>
                    <h1>歌单</h1>
                    <button className="ListDetail_btn" onClick={this.forword.bind(this)}><svg t="1574037679352" className="playlist_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1002" width="32" height="32"><path d="M257.138 2.276c10.24 0 20.594 3.64 28.444 10.922L795.307 485.604c15.70100001 14.563 15.701 38.229 0 52.792L285.582 1010.802c-15.70100001 14.563-41.187 14.563-56.889 0-15.701-14.564-15.70100001-38.23 0-52.793L709.973 512l-481.28-446.009c-15.70100001-14.563-15.70100001-38.23 0-52.793 7.851-7.282 18.205-10.922 28.445-10.922z" fill="#333333" p-id="1003"></path></svg></button>
                </div>
                <div className="ListDetails_pic_container">
                <img src="http://p2.music.126.net/plq-sVLQ5jpdia0MDu1fEw==/109951164485846176.jpg" alt="" className="ListDetails_pic" />
                </div>   
                <ol >
                    {arr.map((item, index) =>
                        <li key={index} className="ListDetails_li" onClick={this.jump.bind(this, item.id)}>
                            <h4>{index+1}.{item.name}</h4>
                            {/* <h4>{item.}</h4> */}
                        </li>)}
                </ol>
            </fieldset>
        )
    }
    jump(id) {
        this.props.history.push(`/Discover/player?id=${id}`)
    }
}
export default ListDtails